<template>
  <div>
    <header>
        <!-- 返回箭头 -->
        <div class="search-return" @click="goBack">
            <i class="iconfont">&#xe624;</i>
        </div>
        <!-- 搜索的输入框 -->
        <div class="search-main">
            <i class="iconfont">&#xe752;</i>
            <form action="" onsubmit="return false" @keyup.enter="goSearchList" >
                <input type="text" placeholder="搜索您喜欢的产品..." v-model.trim="searchVal">
            </form>
        </div>
        <!-- 搜索 -->
        <div class="search-button" @click="goSearchList">搜索</div>
    </header>
  </div>
</template>

<script>
export default {
    name:"Header",
     data(){
        return{
            //输入框的内容
            searchVal:this.$route.query.key ||'',
            //存储搜索内容的数组
            searchArr:[],
        }
    },
   created(){

   },
    methods:{
        goBack(){
            this.$router.back()
        },
        //点击以及键盘enter事件 历史记录 
        goSearchList(){
            //判断 搜索的值是否为空 为空则直接搜索且不保存为本地存储
            if(!this.searchVal) {
                this.$router.push({
                    name:"search-list",
                })
                return
            };
            //判断之前有没有搜索的本地存储 获取本地存储
            if(!localStorage.getItem('searchList')){
                //如果没有相同的信息
                localStorage.setItem('searchList','[]')
            }else{
                // 如果之前有 就让其等于原来的数据
                this.searchArr=JSON.parse(localStorage.getItem('searchList'))
            };
            
            
            
            //增加数据
            this.searchArr.unshift(this.searchVal);
            //ES6去重
            this.searchArr = new Set(this.searchArr);
            //添加至本地存储
            localStorage.setItem('searchList',JSON.stringify(Array.from(this.searchArr)));

            // console.log(this.searchVal);
            console.log(this.searchArr);
            
            //判断当前搜索框的值是否与当前页面传递的值相同 如果相同则代表是相同页面则没必要跳转
            if(this.searchVal == this.$route.query.key) return

            //跳转到列表页面
            this.$router.push({
                name:"search-list",
                query:{
                    // 给url上传key
                    key:this.searchVal
                }
            })
        }
    },
   
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: (40 / @rootsize);
    background-color: #b0352f;
    color: #fff;
    z-index:999;
    .search-return{
        display: flex;
        align-items: center;
        padding: 0 (10 / @rootsize);
       i{
        font-size: (20 / @rootsize);
       }
    }
    .search-button{
        padding: 0 (10 / @rootsize);
        font-size: (16 / @rootsize);
    }
    .search-main{
        display: flex;
        align-items: center;
        padding: (6 / @rootsize) 0;
        width: (260 / @rootsize);
        height: (28 / @rootsize);
        background-color: #fff;
        border-radius: 12px;
        i{
            padding: 0 (10 / @rootsize);
            color: #666;
        }
        form{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 90%;
            color: #666;
            input{
                font-size: (12 / @rootsize);
                width: 90%;
            }
        }
    }

}
</style>